<!-- 这是注册页面 -->
<template>
  <div class="admin-regist">
    <h2>欢迎来到注册页面</h2>
    <div class="admin-regist-form">
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="账号" prop="regusename">
          <el-input
            v-model="form.regusename"
            placeholder="请输入注册账号"
            clearable
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="regusepwd">
          <el-input
            v-model="form.regusepwd"
            placeholder="请输入注册密码"
            clearable
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="regreusepwd">
          <el-input
            v-model="form.regreusepwd"
            placeholder="请确认密码"
            clearable
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onRegist('form')"
            >立即注册</el-button
          >
          <el-button @click="gobackLogin">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里进行数据验证
    let registname = (rule, value, callback) => {
      let reg = /^\w{3,11}$/;
      if (value == "") {
        return callback(new Error("账号不能为空"));
      } else if (!reg.test(value)) {
        callback(new Error("账号必须是3-11为字母数字下划线"));
      } else {
        callback();
      }
    };

    //验证密码
    let registpwd = (rule, value, callback) => {
      let reg2 = /^[a-zA-Z]\w{4,}/;
      if (value == "") {
        callback(new Error("密码不能为空"));
      } else if (!reg2.test(value)) {
        callback(new Error("密码必须以字母开头且5位以上"));
      } else {
        callback();
      }
    };

    //验证重复密码
    let registrepwd = (rule, value, callback) => {
      if (this.form.regusepwd !== this.form.regreusepwd) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    //这里存放数据
    return {
      form: {
        regusename: "", //用户名
        regusepwd: "", //密码
        regreusepwd: "", //确认密码
      },
      rules: {
        regusename: [{ validator: registname, trigger: ["blur", "change"] }],
        regusepwd: [{ validator: registpwd, trigger: ["blur", "change"] }],
        regreusepwd: [{ validator: registrepwd, trigger: ["blur", "change"] }],
      },
      productlist: [],
      list: [],
      newinformation: {},
      flag:false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getInform: function () {
      var list = localStorage.getItem("information_user") || "[]"; //字符串
      return JSON.parse(list);
    },
    setInform: function (arr) {
      localStorage.setItem("information_user", JSON.stringify(arr));
    },
    //取消按钮返回登录界面
    gobackLogin: function () {
      this.$router.push({
        path: "/",
      });
    },
    //注册按钮进行注册
    onRegist: function (form) {
      // var md5 = require('md5');
      // // console.log(this.form);
       this.$refs[form].validate((valid) => {
          
         var newinformation = {
            id: this.form.regusename,
            pwd:this.form.regusepwd,
         };
         if (valid) {
          this.productlist = this.getInform();
          if (this.productlist.length == 0) {
            this.productlist.push(newinformation);
            this.setInform(this.productlist);
            alert("注册成功");
           
            this.$router.push({
              path: "/",
            });
          } else {
            for (var i = 0; i < this.productlist.length; i++) {
              this.flag = false;
              if (this.productlist[i].id == this.form.regusename) {
                alert("此账号已被注册");
                return;
              } else {
                this.flag = true;
              }
            }
            if (this.flag) {
              this.productlist.push(newinformation);
              this.setInform(this.productlist);
              alert("注册成功");
              
              this.$router.push({
                path: "/",
              });
            }
          }

      //去进行axios请求
        // this.$axios.post('regist.php',{
        //   params:{
        //      id: this.form.regusename,
        //      pwd:this.form.regusepwd,
        //   },
        // }).then(res=>{
        //    console.log('数据请求成功',res);
        // })
        }
     });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
div.admin-regist {
  width: 450px;
  height: 350px;
  margin: 100px auto;
  text-align: center;
  padding: 30px 40px;
  box-shadow: 2px 5px 9px rgba(0, 0, 0, 0.3);
  h2 {
  }

  div.admin-regist-form {
    el-form {
      el-form-item {
        el-input {
        }
      }
    }
  }
}
</style>